<template>
  <div>
    <el-select
      v-if="type === 1"
      filterable
      v-model="value"
      multiple
      @change="handleChange"
      class="mb20 mr20"
      style="width: 43%"
    >
      <el-option
        v-for="(item,index) in selectData"
        :key="index"
        :label="item.title"
        :value="item.key"
      />
    </el-select>
    <el-select
      v-else
      filterable
      v-model="value"
      multiple
      @change="handleChange"
      class="mb20 mr20"
      style="width: 43%"
    >
      <el-option
        v-for="(item,index) in deptData"
        :key="index"
        :label="item.title"
        :value="item.key"
      />
    </el-select>
    <el-radio-group
      :disabled="evalMode === 3 || evalMode === 4"
      class="mr20"
      v-model="type"
      @change="handleTypeChange"
      size="small"
    >
      <el-radio-button :label="1">用户</el-radio-button>
      <el-radio-button :label="2">岗位</el-radio-button>
    </el-radio-group>
    <el-tooltip class="item" effect="light" content="选择部门下的岗位时，该岗位下只能有一个人员" placement="top">
      <i class="fs16 el-icon-warning-outline"></i>
    </el-tooltip>
    <x-transfer
      @postData="handlePostdData"
      :titles="['待选执行者', '已选执行者']"
      :from="fromData"
      :to="toData"
      class="mt20"
      ref="xTransfer"
    />
  </div>
</template>

<script>
import XTransfer from '@/components/XTransfer'
import { getDeptUserTree, getDeptPositionTree, commonPosition } from '@/api/eval'

export default {
  components: {
    XTransfer
  },
  data() {
    return {
      type: 1,
      fromData: [],
      toData: [],
      selectData: [],
      deptData: [],
      value: null,
      saveArr: [],
      deptArr: [],
      evalMode: null,
      targetMode: null
    }
  },
  created() {
    getDeptUserTree().then(res => {
      // console.log('getDeptUserTree', res.data)
      this.selectData = res.data
      if (this.toData.length > 0) {
        let arr1 = []
        this.toData.map(v => {
          let id = v.key.split('-')[1]
          arr1.push(id)
        })
        let arr2 = Array.from(new Set(arr1))
        this.value = arr2
        this.handleChange(arr2)
      }
    })

    getDeptPositionTree().then(res => {
      this.deptData = res.data
      if (this.toData.length > 0) {
        let arr1 = []
        this.toData.map(v => {
          let id = v.key.split('-')[1]
          arr1.push(id)
        })
        let arr2 = Array.from(new Set(arr1))
        this.value = arr2
        this.handleChange(arr2)
      }
    })
  },
  methods: {
    // index 传递过来的考评形式
    getEvalMode(num) {
      // console.log('third mode', num)
      this.evalMode = num
      if (num === 3) {
        this.type = 2
      }
    },
    // index 传递过来的指定对象
    getTargetMode(n) {
      this.$nextTick(() => {
        // console.log('third targetMode', n, this.evalMode)
        this.targetMode = n
        if (n === 1 && this.evalMode !== 2) {
          this.type = 2
        } else if (n === 3 && this.evalMode !== 2) {
          this.type = 1
        }
      })
    },
    // 用户/岗位 切换
    handleTypeChange(e) {
      this.value = null
      this.fromData = []
      this.toData = []
    },
    handlePostdData(arr) {
      this.toData = [...arr]
    },
    setArr(arr) {
      this.$nextTick(() => {
        if (arr.length > 0) {
          let executorMode = arr[0].executorMode
          this.type = executorMode === 2 ? 2 : executorMode === 3 ? 1 : null
          arr.map(v => {
            v.key = v.executorId
            v.label = v.name
          })
          this.toData = [...arr]
        }
        // console.log('第三步', this.toData)
      })
    },
    handleChange(val) {
      let arr = []
      this.deptArr = []
      if (this.type === 1) {
        this.selectData.map(v => {
          val.map(j => {
            if (v.key === j) {
              this.deptArr.push(v)
              arr = [...arr, ...v.children]
            }
          })
        })
        arr.map(v => {
          v.label = v.title
        })
      } else {
        this.deptData.map(v => {
          val.map(j => {
            if (v.key === j) {
              this.deptArr.push(v)
              arr = [...arr, ...v.children]
            }
          })
        })

        arr.map(v => {
          if (v.sum === 1) {
            v.disabled = true
            v.tooltip = '该岗位下无人员或存在多个人员不可选'
          }
          let label = v.title.split('-')[0]
          v.label = label
        })
      }

      // console.log('third handleChange', arr, this.deptArr)

      this.$nextTick(() => {
        this.fromData = [...arr]
        this.saveArr = [...arr]
      })
    },
    filterMethod(query, item) {
      return item.title.indexOf(query) > -1
    },
    async postData() {
      this.$refs.xTransfer.postToData()
      let submit = true
      if (this.toData.length > 0) {
        if (this.evalMode === 1) {
          // 填报时，人员或岗位只能选择一个
          if (this.toData.length > 1) {
            submit = false
            this.$message.error('考评形式为科室考评时，只能选择一个执行人')
          } else {
            // 只有一个时，判断是岗位还是人员
            submit = true
          }
        } else if (this.evalMode === 3) {
          // 科室考评时，岗位必须多部门存在
          if (this.toData.length > 1) {
            submit = false
            this.$message.error('考评形式为科室考评时，只能选择一个执行人')
          } else {
            let arr = []
            this.value.map(v => {
              arr.push(v)
            })
            let param = {
              deptIds: arr.join(','),
              positionId: this.toData[0].key
            }
            const res = await commonPosition(param)
            if (res.state === '000000' && res.data) {
              submit = true
            } else {
              this.$message.error('该岗位在几个部门里面并非同时存在')
              submit = false
            }
          }
        } else {
          submit = true
        }

        // return false
      } else {
        submit = false
        this.$message.error('请至少选择一条')
      }

      if (submit) {
        // executorMode 2 岗位， 3人员
        this.toData.map(v => {
          v.executorMode = this.type === 1 ? 3 : 2
          if (this.evalMode === 3) {
            v.executorDeptId = this.value
          }
        })

        if (this.type === 2) {
          this.toData.map(v => {
            let id = v.key.split('-')[1]
            v.key = id
          })
        }

        this.$emit('postDept', this.deptArr)
        this.$emit('postData', true, this.toData, 3)
      } else {
        // this.$message.error('请至少选择一条')
        this.$emit('notSubmit', 3)
      }
    }
  }
}
</script>
